<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>猜数字游戏简化</title>
	</head>
	<body>
		
		<span>请输入你要猜的数字(1~100)</span><br>
		<input type="text" id="number">
		<input type="button" value="猜" id="guessbtn"><br>
		<span>结果：</span>
		<span id="result"></span><br>
		<span >已经猜的次数：</span>
		<span id="guesscount">0</span>
		<br>
		<input type="button" value="再猜一次" id="reguessbtn">
		<script>
			// 1.先把上面需要用到的元素拿到
			let number=document.querySelector('#number');
			let guessbtn=document.querySelector('#guessbtn');
			let result=document.querySelector('#result');
			let guesscount=document.querySelector('#guesscount');
			let reguessbtn=document.querySelector('#reguessbtn');
			// 2.生成一个1~100的随机数
			let toguess=Math.floor(Math.random()*100+1);
			console.log(typeof(toguess))
			console.log(toguess);
			let count=0;
			// 3.实现点击 猜 按钮的逻辑
			guessbtn.onclick=function(){
				if(number.value==='')
				{
					return '';
				}
				if(toguess>number.value){
					result.innerHTML='猜小了';
					result.style='color:red';
				}
				else if(toguess<number.value){
					result.innerHTML='猜大了';
					result.style='color:red';
				}
				else{
					result.innerHTML='猜对了';
				}
				
				count++;
				guesscount.innerHTML=count;
			}
			// 4.实现重新开始游戏
			// reguessbtn.onclick=function(){
			// 	number.value='';
			// 	count=0;
			// 	guesscount.innerHTML=count;
			// 	result.innerHTML='';
			// }
			
			
			//让页面刷新即可  location和document是并列关系对象
			//location 用来控制页面的链接/地址 通过reload操作就可以刷新页面
			reguessbtn.onclick=function(){
				location.reload();
			}
		</script>
		
		
		
		
		
	</body>
</html>
